<!--  -->
<template>

    <header style="display:flex;backgroundColor:#545c64" :style="{background:global_bg_color}">
        <div style="display:flex;flex:1">
            <div class="logo">中小学在线学习测试版</div>
            <i class="collapse" @click="setCollapseSideBar"
                :class="isCollapseSideBar?'el-icon-s-unfold':'el-icon-s-fold'"></i>
        </div>
        <el-menu class="el-menu-demo" mode="horizontal" :background-color="global_bg_color" text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">一键换肤</template>
                <el-menu-item index="2-1" @click="setGlobalBgColor('orange')">橙色</el-menu-item>
                <el-menu-item index="2-2" @click="setGlobalBgColor('black')">黑色</el-menu-item>
                <el-menu-item index="2-3" @click="setGlobalBgColor('red')">红色</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">嗨呀Stic</template>
                <el-menu-item index="3-1" @click="logOut">注销</el-menu-item>
            </el-submenu>
        </el-menu>
    </header>

</template>

<script>
/* eslint-disable */ // 忽略该行往下 eslint的错误
    // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from "vuex"

    export default {
        // import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            // 这里存放数据
            return {

            }
        },
        // 监听属性 类似于data概念
        computed: {
            ...mapState(['global_bg_color', 'isCollapseSideBar'])

        },
        // 监控data中的数据变化
        watch: {},
        // 方法集合
        methods: {
            ...mapMutations(['setGlobalBgColor', 'setCollapseSideBar']),

            logOut() {
                this.$router.push('/login')
            }
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        // 生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {

        }
    }

</script>
<style scoped>
    header {
        padding: 0 20px;
    }

    .logo,
    .collapse {
        padding: 0 10px;
        font-size: 18px;
        color: #fff;
        line-height: 61px;
        cursor: pointer;
    }

</style>
